<template>
  <div class="min-h-screen bg-white flex justify-center">
    <div class="w-full max-w-[800px] p-4 pb-20">
      <h1 class="text-2xl font-bold mb-6">抽奖</h1>
      
      <!-- Lucky Draw Overview Card -->
      <div class="mb-6 border-none shadow-lg overflow-hidden rounded-lg">
        <div class="bg-gradient-to-r from-blue-600 to-blue-400 p-6 text-white">
          <div class="flex items-center justify-between mb-2">
            <h2 class="text-lg font-medium">抽奖机会</h2>
            <div class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center">
              <van-icon name="gift-o" class="text-xl text-white" />
            </div>
          </div>
          <div class="text-3xl font-bold mb-1">{{ remainingChances }} 次</div>
          <div class="flex justify-between text-sm opacity-90">
            <div class="flex items-center">
              <div class="w-5 h-5 rounded-full bg-yellow-300 bg-opacity-20 flex items-center justify-center mr-2">
                <van-icon name="medal-o" class="text-yellow-300" />
              </div>
              <span>累计获得: {{ totalEarned }} HDFS</span>
            </div>
            <div class="flex items-center">
              <div class="w-5 h-5 rounded-full bg-green-300 bg-opacity-20 flex items-center justify-center mr-2">
                <van-icon name="clock-o" class="text-green-300" />
              </div>
              <span>明日刷新: {{ refreshCount }} 次</span>
            </div>
          </div>
        </div>
        <div class="p-4 bg-white">
          <div class="flex justify-between items-center">
            <div 
              class="flex items-center cursor-pointer"
              @click="navigateTo('/prize-records')"
            >
              <van-icon name="orders-o" class="text-blue-600 mr-1" />
              <span class="text-blue-600">中奖记录</span>
            </div>
            <van-button 
              type="primary"
              class="custom-button"
              @click="showRules = true"
            >
              活动规则
            </van-button>
          </div>
        </div>
      </div>
      
      <!-- Lucky Draw Grid -->
      <div class="mb-6">
        <div class="border-none shadow-lg p-4 bg-white rounded-lg">
          <!-- Prize Result Popup -->
          <van-popup
            v-model:show="showResult"
            round
            :style="{ padding: '32px', width: '85%', maxWidth: '340px' }"
            :overlay-style="{ background: 'rgba(0, 0, 0, 0.7)' }"
          >
            <div class="text-center">
              <div class="w-20 h-20 rounded-full bg-yellow-50 flex items-center justify-center mx-auto mb-4">
                <van-icon name="medal-o" class="text-yellow-500 text-6xl" />
              </div>
              <h3 class="text-xl font-bold mb-2">恭喜您获得</h3>
              <p class="text-3xl font-bold text-blue-600 mb-6" v-if="result !== null">
                {{ getPrizeName(result) }}
              </p>
              <div class="flex justify-center space-x-4">
                <van-button 
                  plain
                  type="primary"
                  class="border-blue-600 text-blue-600 px-6"
                  @click="resetSpin"
                >
                  关闭
                </van-button>
                <van-button 
                  type="primary"
                  class="px-6"
                  @click="claimPrize"
                >
                  立即领取
                </van-button>
              </div>
            </div>
          </van-popup>
          
          <!-- Grid Container -->
          <div class="flex flex-col items-center">
            <div class="relative w-[340px] h-[300px] mb-4">
              <!-- Grid Background -->
              <div class="absolute inset-0 bg-gradient-to-br from-blue-50 to-white rounded-lg"></div>
              
              <!-- Grid Layout -->
              <div class="grid grid-cols-3 grid-rows-3 gap-3 w-full h-full p-4 relative">
                <!-- 第一行 -->
                <div 
                  class="prize-cell"
                  :class="[activeIndex === 0 ? 'active' : '']"
                >
                  <div class="prize-content">
                    <div 
                      class="prize-icon" 
                      :style="{ backgroundColor: getPrizeColor(0) }"
                    ></div>
                    <div class="prize-name">
                      {{ getPrizeName(0) }}
                    </div>
                  </div>
                </div>
                
                <div 
                  class="prize-cell"
                  :class="[activeIndex === 1 ? 'active' : '']"
                >
                  <div class="prize-content">
                    <div 
                      class="prize-icon" 
                      :style="{ backgroundColor: getPrizeColor(1) }"
                    ></div>
                    <div class="prize-name">
                      {{ getPrizeName(1) }}
                    </div>
                  </div>
                </div>
                
                <div 
                  class="prize-cell"
                  :class="[activeIndex === 2 ? 'active' : '']"
                >
                  <div class="prize-content">
                    <div 
                      class="prize-icon" 
                      :style="{ backgroundColor: getPrizeColor(2) }"
                    ></div>
                    <div class="prize-name">
                      {{ getPrizeName(2) }}
                    </div>
                  </div>
                </div>
                
                <!-- 第二行 -->
                <div 
                  class="prize-cell"
                  :class="[activeIndex === 7 ? 'active' : '']"
                >
                  <div class="prize-content">
                    <div 
                      class="prize-icon" 
                      :style="{ backgroundColor: getPrizeColor(5) }"
                    ></div>
                    <div class="prize-name">
                      {{ getPrizeName(5) }}
                    </div>
                  </div>
                </div>
                
                <!-- 中间按钮 -->
                <div class="flex items-center justify-center">
                  <button 
                    class="draw-button"
                    :class="{ 'disabled': isSpinning || remainingChances <= 0 }"
                    @click="startSpin"
                    :disabled="isSpinning || remainingChances <= 0"
                  >
                    <div class="draw-button-inner">
                      <template v-if="isSpinning">
                        <div class="flex flex-col items-center">
                          <van-icon name="star-o" class="text-2xl mb-1 animate-spin" />
                          <span>抽奖中</span>
                        </div>
                      </template>
                      <template v-else-if="remainingChances > 0">
                        <div class="flex flex-col items-center">
                          <van-icon name="gift-o" class="text-2xl mb-1" />
                          <span>开始</span>
                        </div>
                      </template>
                      <template v-else>
                        机会已用完
                      </template>
                    </div>
                  </button>
                </div>
                
                <div 
                  class="prize-cell"
                  :class="[activeIndex === 3 ? 'active' : '']"
                >
                  <div class="prize-content">
                    <div 
                      class="prize-icon" 
                      :style="{ backgroundColor: getPrizeColor(3) }"
                    ></div>
                    <div class="prize-name">
                      {{ getPrizeName(3) }}
                    </div>
                  </div>
                </div>
                
                <!-- 第三行 -->
                <div 
                  class="prize-cell"
                  :class="[activeIndex === 6 ? 'active' : '']"
                >
                  <div class="prize-content">
                    <div class="prize-icon bg-slate-200 flex items-center justify-center">
                      <van-icon name="gift-o" class="text-slate-500" />
                    </div>
                    <div class="prize-name">
                      谢谢参与
                    </div>
                  </div>
                </div>
                
                <div 
                  class="prize-cell"
                  :class="[activeIndex === 5 ? 'active' : '']"
                >
                  <div class="prize-content">
                    <div class="prize-icon bg-slate-200 flex items-center justify-center">
                      <van-icon name="gift-o" class="text-slate-500" />
                    </div>
                    <div class="prize-name">
                      谢谢参与
                    </div>
                  </div>
                </div>
                
                <div 
                  class="prize-cell"
                  :class="[activeIndex === 4 ? 'active' : '']"
                >
                  <div class="prize-content">
                    <div 
                      class="prize-icon" 
                      :style="{ backgroundColor: getPrizeColor(4) }"
                    ></div>
                    <div class="prize-name">
                      {{ getPrizeName(4) }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <p v-if="remainingChances <= 0" class="text-sm text-slate-500 mt-3 text-center">
              今日抽奖机会已用完，明天再来吧！
            </p>
            
            <!-- Activity Rules -->
            <div class="mt-4 w-full">
              <h3 class="font-semibold mb-4 flex items-center">
                <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center mr-2">
                  <van-icon name="info-o" class="text-blue-600" />
                </div>
                活动规则
              </h3>
              
              <div class="space-y-3 text-sm">
                <div class="p-4 rounded-lg bg-slate-50 border border-slate-100">
                  <h4 class="font-medium mb-2 flex items-center">
                    <div class="w-5 h-5 rounded-full bg-blue-600 bg-opacity-10 flex items-center justify-center mr-2">
                      <span class="text-xs text-blue-600 font-bold">1</span>
                    </div>
                    抽奖机会
                  </h4>
                  <p class="text-slate-600 ml-7">每位用户每天可获得3次免费抽奖机会，次日0点自动刷新。</p>
                </div>
                
                <div class="p-4 rounded-lg bg-slate-50 border border-slate-100">
                  <h4 class="font-medium mb-2 flex items-center">
                    <div class="w-5 h-5 rounded-full bg-blue-600 bg-opacity-10 flex items-center justify-center mr-2">
                      <span class="text-xs text-blue-600 font-bold">2</span>
                    </div>
                    额外机会
                  </h4>
                  <p class="text-slate-600 ml-7">完成每日任务可获得额外抽奖机会：签到+1次，邀请好友+2次/人</p>
                </div>
                
                <div class="p-4 rounded-lg bg-slate-50 border border-slate-100">
                  <h4 class="font-medium mb-2 flex items-center">
                    <div class="w-5 h-5 rounded-full bg-blue-600 bg-opacity-10 flex items-center justify-center mr-2">
                      <span class="text-xs text-blue-600 font-bold">3</span>
                    </div>
                    奖品有效期
                  </h4>
                  <p class="text-slate-600 ml-7">中奖后请在7天内领取奖品，逾期未领取将自动作废。</p>
                </div>
              </div>
            </div>
            
            <!-- Prize List -->
            <div class="mt-8 w-full">
              <h3 class="font-semibold mb-4 flex items-center">
                <div class="w-6 h-6 rounded-full bg-yellow-100 flex items-center justify-center mr-2">
                  <van-icon name="medal-o" class="text-yellow-500" />
                </div>
                奖品列表
              </h3>
              <div class="grid grid-cols-2 gap-3">
                <div 
                  v-for="(prize, index) in prizes" 
                  :key="prize?.id || index" 
                  class="flex items-center p-3 rounded-lg bg-slate-50 border border-slate-100 hover:shadow-md transition-shadow"
                >
                  <div 
                    class="w-6 h-6 rounded-full mr-3 flex items-center justify-center"
                    :style="{ backgroundColor: prize?.color || '#CCCCCC' }"
                  >
                    <van-icon name="gift-o" class="text-white text-sm" v-if="prize?.name === '谢谢参与'" />
                  </div>
                  <div class="flex-1">
                    <div class="font-medium text-sm">{{ prize?.name || '奖品加载中' }}</div>
                    <div class="text-xs text-slate-500">概率: {{ prize?.probability || '加载中' }}</div>
                  </div>
                </div>
                <!-- 如果奖品列表为空，显示加载中 -->
                <div v-if="prizes.length === 0" class="col-span-2 text-center py-4 text-slate-500">
                  <van-loading type="spinner" size="24px" />
                  <p class="mt-2">奖品信息加载中...</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Rules Dialog -->
    <van-dialog
      v-model:show="showRules"
      title="活动规则"
      confirm-button-text="我知道了"
      :show-cancel-button="false"
      :close-on-click-overlay="true"
      class="custom-dialog"
    >
      <div class="p-5">
        <div class="space-y-4 text-sm">
          <div class="flex">
            <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center mr-3 mt-1 flex-shrink-0">
              <span class="text-xs text-blue-600 font-bold">1</span>
            </div>
            <div>
              <h4 class="font-medium mb-1">抽奖机会</h4>
              <p class="text-slate-600">每位用户每天可获得3次免费抽奖机会，次日0点自动刷新。</p>
            </div>
          </div>
          
          <div class="flex">
            <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center mr-3 mt-1 flex-shrink-0">
              <span class="text-xs text-blue-600 font-bold">2</span>
            </div>
            <div>
              <h4 class="font-medium mb-1">额外机会</h4>
              <p class="text-slate-600">完成每日任务可获得额外抽奖机会：签到+1次，邀请好友+2次/人</p>
            </div>
          </div>
          
          <div class="flex">
            <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center mr-3 mt-1 flex-shrink-0">
              <span class="text-xs text-blue-600 font-bold">3</span>
            </div>
            <div>
              <h4 class="font-medium mb-1">奖品有效期</h4>
              <p class="text-slate-600">中奖后请在7天内领取奖品，逾期未领取将自动作废。</p>
            </div>
          </div>
          
          <div class="flex">
            <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center mr-3 mt-1 flex-shrink-0">
              <span class="text-xs text-blue-600 font-bold">4</span>
            </div>
            <div>
              <h4 class="font-medium mb-1">奖品发放</h4>
              <p class="text-slate-600">所有奖品将在1-3个工作日内发放到您的账户中。</p>
            </div>
          </div>
          
          <div class="flex">
            <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center mr-3 mt-1 flex-shrink-0">
              <span class="text-xs text-blue-600 font-bold">5</span>
            </div>
            <div>
              <h4 class="font-medium mb-1">活动时间</h4>
              <p class="text-slate-600">本活动长期有效，平台保留随时调整活动规则的权利。</p>
            </div>
          </div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showLoadingToast } from 'vant'
import { getUserLuckyDrawInfo, getPrizeList, drawPrize, claimPrize as claimPrizeApi } from '@/api/lucky_draw'

const router = useRouter()
const isSpinning = ref(false)
const activeIndex = ref(-1)
const result = ref(null)
const showResult = ref(false)
const showRules = ref(false)
const remainingChances = ref(0)
const totalEarned = ref(0)
const refreshCount = ref(0)
let spinInterval = null
let spinCount = 0
let finalIndex = 0
let recordId = null

// 奖品数据
const prizes = ref([])

// 默认奖品数据，用于在API加载前显示
const defaultPrizes = [
  { id: 1, name: "10 HDFS", color: "#FF6B6B", probability: "10%" },
  { id: 2, name: "5 HDFS", color: "#4ECDC4", probability: "15%" },
  { id: 3, name: "限量NFT", color: "#FFD166", probability: "5%" },
  { id: 4, name: "2 HDFS", color: "#6B5B95", probability: "15%" },
  { id: 5, name: "1 HDFS", color: "#FF8C42", probability: "15%" },
  { id: 6, name: "谢谢参与", color: "#88D8B0", probability: "40%" }
]

// 获取奖品颜色，防止在API加载前出现错误
const getPrizeColor = (index) => {
  if (!prizes.value || prizes.value.length <= index) {
    return defaultPrizes[index]?.color || '#CCCCCC'
  }
  return prizes.value[index].color
}

// 获取奖品名称，防止在API加载前出现错误
const getPrizeName = (index) => {
  if (!prizes.value || prizes.value.length <= index) {
    return defaultPrizes[index]?.name || '奖品加载中'
  }
  return prizes.value[index].name
}

// 初始化数据
const initData = async () => {
  try {
    showLoadingToast({
      message: '加载中...',
      forbidClick: true,
    })
    
    // 获取用户抽奖信息
    const userInfoRes = await getUserLuckyDrawInfo()
    if (userInfoRes.code === 0 && userInfoRes.data) {
      remainingChances.value = userInfoRes.data.remainingChances
      totalEarned.value = userInfoRes.data.totalEarned
      refreshCount.value = userInfoRes.data.refreshCount
    }
    
    // 获取奖品列表
    const prizesRes = await getPrizeList()
    if (prizesRes.code === 0 && prizesRes.data) {
      // 确保奖品数据包含必要的字段
      const validPrizes = prizesRes.data.map(prize => {
        return {
          id: prize.id || Math.random().toString(36).substr(2, 9),
          name: prize.name || '未知奖品',
          color: prize.color || '#CCCCCC',
          probability: prize.probability || '未知'
        }
      })
      prizes.value = validPrizes
    } else {
      // 如果API请求失败，使用默认奖品数据
      prizes.value = [...defaultPrizes]
      console.warn('获取奖品列表失败，使用默认数据')
    }
    
    showLoadingToast().close()
  } catch (error) {
    console.error('初始化数据失败:', error)
    showToast('数据加载失败，请稍后重试')
    // 使用默认奖品数据
    prizes.value = [...defaultPrizes]
    showLoadingToast().close()
  }
}

// 组件挂载时初始化数据
onMounted(() => {
  initData()
})

// 开始抽奖
const startSpin = async () => {
  if (isSpinning.value || remainingChances.value <= 0) return
  
  isSpinning.value = true
  showResult.value = false
  spinCount = 0
  
  try {
    // 调用抽奖API
    const res = await drawPrize()
    
    if (res.code === 0 && res.data) {
      result.value = res.data.prizeIndex
      recordId = res.data.recordId
      remainingChances.value = res.data.remainingChances
    } else {
      showToast(res.message || '抽奖失败，请稍后重试')
      isSpinning.value = false
      return
    }
  } catch (error) {
    console.error('抽奖失败:', error)
    showToast('抽奖失败，请稍后重试')
    isSpinning.value = false
    return
  }
  
  // 找到这个奖品在网格中的索引
  const gridItems = [
    { type: "prize", index: 0 }, // Prize 1
    { type: "prize", index: 1 }, // Prize 2
    { type: "prize", index: 2 }, // Prize 3
    { type: "prize", index: 3 }, // Prize 4
    { type: "prize", index: 4 }, // Prize 5
    { type: "prize", index: 5 }, // Prize 6
  ]
  
  const gridPrizeIndices = gridItems
    .map((item, index) => item.type === "prize" && item.index === result.value ? index : -1)
    .filter(index => index !== -1)
  
  finalIndex = gridPrizeIndices[0] || 0
  
  // 开始旋转动画
  let currentIndex = 0
  const initialSpeed = 100 // 每个格子的初始速度(ms)
  const maxSpeed = 50 // 最快速度(ms)
  const finalSlowSpeed = 300 // 最终减速阶段的速度(ms)
  
  const updateSpinSpeed = () => {
    const totalSpins = 30 + Math.floor(Math.random() * 10) // 总共旋转的格子数
    
    if (spinCount < totalSpins - 12) {
      // 加速或匀速阶段
      return Math.max(maxSpeed, initialSpeed - spinCount * 2)
    } else {
      // 减速阶段
      const remainingSpins = totalSpins - spinCount
      return maxSpeed + (finalSlowSpeed - maxSpeed) * (1 - remainingSpins / 12)
    }
  }
  
  const spin = () => {
    activeIndex.value = currentIndex
    currentIndex = (currentIndex + 1) % 8 // 修正为8个格子
    spinCount++
    
    const speed = updateSpinSpeed()
    
    // 检查是否应该停止
    if (spinCount > 30 && currentIndex === finalIndex) {
      if (spinInterval) {
        clearTimeout(spinInterval)
        spinInterval = null
      }
      
      setTimeout(() => {
        isSpinning.value = false
        showResult.value = true
        remainingChances.value--
      }, 500)
      return
    }
    
    spinInterval = setTimeout(spin, speed)
  }
  
  // 开始旋转
  spin()
}

// 重置抽奖
const resetSpin = () => {
  activeIndex.value = -1
  showResult.value = false
}

// 领取奖品
const claimPrize = async () => {
  if (!recordId || result.value === null) {
    showToast('奖品信息有误，请重试')
    return
  }
  
  try {
    showLoadingToast({
      message: '领取中...',
      forbidClick: true,
    })
    
    // 安全地获取奖品ID
    const prizeId = prizes.value[result.value]?.id || 
                   (defaultPrizes[result.value]?.id || result.value + 1)
    
    const res = await claimPrizeApi({
      prizeId: prizeId,
      recordId: recordId
    })
    
    if (res.code === 0 && res.data && res.data.success) {
      showToast(res.data.message || '奖品已发放到您的账户')
      resetSpin()
      navigateTo('/prize-records')
    } else {
      showToast(res.message || '领取失败，请稍后重试')
    }
    
    showLoadingToast().close()
  } catch (error) {
    console.error('领取奖品失败:', error)
    showToast('领取失败，请稍后重试')
    showLoadingToast().close()
  }
}

// 导航方法
const navigateTo = (path) => {
  router.push(path)
}

// 清理定时器
onBeforeUnmount(() => {
  if (spinInterval) {
    clearTimeout(spinInterval)
  }
})
</script>

<style scoped>
/* Base styles */
.min-h-screen {
  min-height: 100vh;
}

.bg-white {
  background-color: #ffffff;
}

.flex {
  display: flex;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.justify-center {
  justify-content: center;
}

.w-full {
  width: 100%;
}

.md\:max-w-\[800px\] {
  max-width: 800px;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.pb-20 {
  padding-bottom: 5rem;
}

.text-2xl {
  font-size: 1.5rem;
}

.font-bold {
  font-weight: 700;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

/* Card styles */
.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.overflow-hidden {
  overflow: hidden;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-full {
  border-radius: 9999px;
}

/* Gradient background */
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.from-blue-600 {
  --tw-gradient-from: #2563eb;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(37, 99, 235, 0));
}

.from-blue-50 {
  --tw-gradient-from: #eff6ff;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239, 246, 255, 0));
}

.to-blue-400 {
  --tw-gradient-to: #60a5fa;
}

.to-white {
  --tw-gradient-to: #ffffff;
}

/* Text styles */
.text-white {
  color: #ffffff;
}

.text-lg {
  font-size: 1.125rem;
}

.text-xl {
  font-size: 1.25rem;
}

.text-2xl {
  font-size: 1.5rem;
}

.text-3xl {
  font-size: 1.875rem;
}

.text-6xl {
  font-size: 3.75rem;
}

.font-medium {
  font-weight: 500;
}

.text-sm {
  font-size: 0.875rem;
}

.text-xs {
  font-size: 0.75rem;
}

.opacity-90 {
  opacity: 0.9;
}

.text-blue-600 {
  color: #2563eb;
}

.text-yellow-300 {
  color: #fcd34d;
}

.text-yellow-500 {
  color: #eab308;
}

.text-green-300 {
  color: #86efac;
}

.text-slate-500 {
  color: #64748b;
}

.text-slate-600 {
  color: #475569;
}

.text-center {
  text-align: center;
}

/* Background colors */
.bg-white {
  background-color: #ffffff;
}

.bg-blue-600 {
  background-color: #2563eb;
}

.bg-blue-100 {
  background-color: #dbeafe;
}

.bg-blue-50 {
  background-color: #eff6ff;
}

.bg-yellow-100 {
  background-color: #fef3c7;
}

.bg-yellow-50 {
  background-color: #fffbeb;
}

.bg-slate-50 {
  background-color: #f8fafc;
}

.bg-slate-200 {
  background-color: #e2e8f0;
}

.bg-opacity-20 {
  --tw-bg-opacity: 0.2;
}

.bg-opacity-10 {
  --tw-bg-opacity: 0.1;
}

/* Layout styles */
.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

.ml-7 {
  margin-left: 1.75rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.space-x-4 > * + * {
  margin-left: 1rem;
}

.space-y-3 > * + * {
  margin-top: 0.75rem;
}

.space-y-4 > * + * {
  margin-top: 1rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Grid styles */
.grid {
  display: grid;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-rows-3 {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.gap-3 {
  gap: 0.75rem;
}

/* Position styles */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Border styles */
.border {
  border-width: 1px;
}

.border-none {
  border-style: none;
}

.border-slate-100 {
  border-color: #f1f5f9;
}

.border-blue-600 {
  border-color: #2563eb;
}

/* Cursor styles */
.cursor-pointer {
  cursor: pointer;
}

/* Transition styles */
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hover\:shadow-md:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Animation styles */
.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Custom button styles */
.custom-button {
  height: 32px;
  padding: 0 16px;
  font-size: 14px;
  border-radius: 4px;
}

/* Custom dialog styles */
.custom-dialog {
  border-radius: 12px;
  overflow: hidden;
}

/* Prize grid styles */
.w-\[340px\] {
  width: 340px;
}

.h-\[340px\] {
  height: 340px;
}

.w-5 {
  width: 1.25rem;
}

.h-5 {
  height: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

.h-6 {
  height: 1.5rem;
}

.w-10 {
  width: 2.5rem;
}

.h-10 {
  height: 2.5rem;
}

.w-20 {
  width: 5rem;
}

.h-20 {
  height: 5rem;
}

/* Prize cell styles */
.prize-cell {
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #2563eb;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prize-cell.active {
  transform: scale(1.05);
  box-shadow: 0 0 0 2px #2563eb, 0 4px 8px rgba(37, 99, 235, 0.2);
  z-index: 10;
}

.prize-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 8px;
}

.prize-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prize-name {
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
}

/* Draw button styles */
.draw-button {
  width: 90%;
  height: 90%;
  border-radius: 8px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.draw-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}

.draw-button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.draw-button.disabled {
  background: linear-gradient(135deg, #94a3b8, #64748b);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.draw-button-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Responsive styles */
@media (max-width: 640px) {
  .grid-cols-2 {
    grid-template-columns: 1fr;
  }
}
</style>
